<!--
 * @Description: 
 * @Date: 2020-12-07 14:22:30
 * @LastEditors: lother
 * @LastEditTime: 2021-01-09 17:32:18
 * @FilePath: \AccountOpening-H5\src\views\login\register.vue
-->
<template>
<div>
    <ul class="register">
        <li>
            <div @click="showPickerChange" class="codePhone">
                {{form.countryCode?'+':''}}{{form.countryCode}}
            </div>
            <van-field type="tel" v-model="form.mobile" :placeholder="$t('login.login.5636agny0i80')" />
        </li>
        <li>
            <van-field type="tel" v-model="form.captcha" :placeholder="$t('login.login.5636agny1q40')" >
                <template #extra>
                    <div class="codeChange" @click.stop="codeChange">
                        <p v-show="codeShow">
                           {{$t('login.login.5636agny27s0')}}
                        </p>
                        <p v-show="!codeShow">
                            <van-count-down ref="countDown" :time="60000" :auto-start="false" :format="'ss'+$t('login.login.5636agny2qc0')"  @finish="finish"/>
                        </p>
                    </div>
                </template>
            </van-field>
        </li>
         <li>
            <van-field :type="psdShow?'password':'text'" v-model="form.password" :placeholder="$t('login.login.5636agny3000')" :right-icon="psdShow?'closed-eye':'eye-o'" @click-right-icon="psdShow= !psdShow"></van-field>
        </li>
         <li>
            <van-field :type="rePsdShow?'password':'text'" v-model="repassword" :placeholder="$t('login.forgetPsd.5636doqzpz00')" :right-icon="rePsdShow?'closed-eye':'eye-o'" @click-right-icon="rePsdShow= !rePsdShow"></van-field>
        </li>
    </ul>
    <p class="pactList" @click.stop.self="pachClick" :class="pachShow?'on':''">
        {{$t('login.register.5636h8pvow80')}}<router-link :to="`pact/`+id">{{$t('login.register.5636h8pvp800')}}</router-link>
    </p>
    <van-button type="info" block @click="submit">{{$t('login.register.56rwdkvoae80')}}</van-button>
    <p class="typeShow">{{$t('login.forgetPsd.5636doqzqg40')}}<span @click="typeChange">{{$t('login.forgetPsd.5636doqzqog0')}}</span></p>

    <van-popup v-model="showPicker" round position="bottom">
        <van-search :placeholder="$t('login.register.56dgxajeiws0')" v-model="searchCode" @input="searchInput" />
        <van-picker show-toolbar :columns="cities" :value-key="lang" :default-index="index"
            @cancel="showPicker = false" @confirm="onConfirm" :confirm-button-text="$t('login.login.56hmiq7w5g80')" :cancel-button-text="$t('login.login.56hmiq7xxec0')" />
    </van-popup>
</div>
</template>
<script>
import  list from '@/assets/json/code.json';
import vPinyin  from '@/assets/js/hanziToPinyin.js';
import { register } from '@/api/login'
import {  send } from '@/api/common'
import  {setToken} from '@/utils/auth'
import { agreement  } from '@/api/common'

export default {
    props:{
        type:{
            type:Number,
            dafault:null
        }
    },
    data() {
        return {
            showPicker:false,
            cities:[],
            form:{
                countryCode:"86",
                mobile:"",
                captcha:"",
                password:"",
                from:""
            },
            codeShow:true,
            index:0,
            lang:'',
            value:86,
            searchCode:'86',
            psdShow:true,
            rePsdShow:true,
            pachShow:false,
            repassword:"",
            links:{},
            id:""
        }
    },
    mounted() {
            this.form.from = this.$query().from
            this.lang  = localStorage.getItem("lang")
            this.$nextTick(function() {
            list.forEach(element => {
                element.lang = this.lang;
            });
            list.sort(function(a, b) {
                var x, y;
                x = vPinyin.chineseToPinYin(a[a.lang]).toLowerCase();
                y = vPinyin.chineseToPinYin(b[a.lang]).toLowerCase();
                if (x < y) {
                return -1;
                }
                if (x > y) {
                return 1;
                }
                return 0;
            });
            this.index = list.findIndex((item, index) => {
                return item.code == this.value
                // return (item.code == this.value?index:'')
            })
            this.cities = list;
            });
            this.agreementList()
    },
    methods: {
        pachClick(){
            this.pachShow = !this.pachShow
        },
        showPickerChange(){
            this.showPicker = true,
            this.lang  = localStorage.getItem("lang")
            list.forEach(element => {
                element.lang = this.lang;
            });
            list.sort(function(a, b) {
                var x, y;
                x = vPinyin.chineseToPinYin(a[a.lang]).toLowerCase();
                y = vPinyin.chineseToPinYin(b[a.lang]).toLowerCase();
                if (x < y) {
                return -1;
                }
                if (x > y) {
                return 1;
                }
                return 0;
            });
            this.index = list.findIndex((item, index) => {
                return item.code == this.value
                // return (item.code == this.value?index:'') 
            })
            this.cities = list;
        },
        submit(){
            var reg = /^(?!(?:[0-9]+|[a-zA-Z]+|[-\/\\^$*+?.()|[\]{}]+)$)[!-~]{8,16}$/
            if(!this.form.mobile){
                this.$toast(this.$t('login.login.5636agny0i80'))
                return false;
            }
            if(!this.form.captcha){
                this.$toast(this.$t('login.login.5636agny4g80'))
                return false;
            }
            if(!this.form.password){
                this.$toast(this.$t('login.login.5636agny4t00'))
                return false;
            }else if(!reg.test(this.form.password)){
                this.$toast(this.$t('login.login.5636agny3000'))
                return false;
            }
            if(this.form.password !== this.repassword){
                this.$toast( this.$t('login.forgetPsd.5636fwceqjs0') )
                return false;
            }
            if(!this.pachShow){
                this.$toast(this.$t('login.register.5636h8pvr5o0'))
                return false;
            }
            register(Object.assign({},this.form,{countryCode : '+'+this.form.countryCode}) )
            .then(res=>{
                if(res.code==1){
                    setToken(res.data.token)
                    this.$router.replace(res.data.redirect_url)
                    this.form={
                        mobile:"",
                        captcha:"",
                        password:"",
                    }
                }
            })

        },
        onConfirm(value) {
            this.form.countryCode =value.code;
            this.showPicker = false;
        },
        start() {
            this.$refs.countDown.start();
        },
        reset() {
            this.$refs.countDown.reset();
        },
        finish() {
            this.reset()
            this.codeShow=true;
        },
        codeChange(){
            if(!this.form.mobile){
                this.$toast(this.$t('login.login.5636agny0i80'))
                return false;
            }
            if(this.codeShow){
                var obj = {countryCode : '+'+this.form.countryCode ,  mobile :this.form.mobile  , event :"register" }
                send(obj)
                .then(res=>{
                    if(res.code==1){
                        this.codeShow=false;
                        this.start()
                    }
                })
            }
        },
        psdClick(e){
            console.log(e)
        },
        typeChange(){
            this.finish()
            this.$emit("update:type",1)
        },
        agreementList(){
            agreement({type:2,pageSize:1})
            .then(res=>{
                this.id = (res.data[0].id ?? '')
            })

        },
        searchInput(val){
            this.index = this.cities.findIndex((item, index) => {
                if(item.code == val){
                    // this.value = item.code;
                    // this.form.countryCode = item.code;
                    return item.code == val
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
    .register{
        li{
            border-bottom: 1px solid transparent;
            border-color: @borderColor;
            display:flex;
            font-size: 0.26rem;
            color: @sizeColor;
            padding-top: 0.5rem;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            vertical-align: middle;
            position: relative;
            .codePhone{
                width: 18%;
                margin-right: 0.2rem;
                padding-right: 0.21rem;
                background: url('~@/assets/img/xia.png') no-repeat center right;
                background-size: .21rem;
                line-height: 0.44rem;
                align-self: center;
            }
            .van-cell{
                color: @sizeColor;
                font-size: 0.26rem;
                padding-left: 0;
                padding-right: 0;
            }
            .codeChange,.van-count-down{
                color: @btnColor;
                
            }
        }
    }
    .pactList{
        padding-left: .4rem;
        background: url('~@/assets/img/icon_bgx.png') no-repeat left center;
        background-size: .28rem;
        font-size: .22rem;
        color: @sizeColor;
        line-height: .3rem;
        margin: .3rem 0;
        position: relative;
        overflow: hidden;
        a{
            color: @btnColor;
        }
    }
    .pactList.on{
        background: url('~@/assets/img/icon_gx.png') no-repeat left center;
        background-size: .28rem;
    }
    .typeShow{
        text-align: center;
         font-size: .22rem;
        color: @sizeColor;
        line-height: .3rem;
        padding-top: 0.6rem;
        padding-bottom: 0.3rem;
        span{
            color: @btnColor;
        }
    }
</style>